<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <link rel="stylesheet" href="../project/static/css/base.css">
    <link rel="stylesheet" href="bbb.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>
    <div class="box" id="app">
        <div class="title">
            <ul>
                <li @click="change(1)" :class="{'active':index==1}">手机注册</li>
                <li @click="change(2)" :class="{'active':index==2}">邮箱注册</li>
                <li @click="change(3)" :class="{'active':index==3}">个性注册</li>
            </ul>
        </div>
        <!-- 手机注册 -->
        <div class="x" v-if="index==1">
            <div class="top">
                <div class="input">
                    <input type="text" placeholder="手机号码">
                </div>
                <div class="yzm">
                    <input type="text" placeholder="短信验证码">
                    <button>免费获取验证码</button>
                </div>
                <div class="input">
                    <input type="text" placeholder="静态密码">
                </div>
            </div>
            <div class="bottom">
                <div class="buttom_title">
                    <span class="buttom_title_1">实名及防沉迷信息填写</span>
                    <span class="buttom_title_2">为什么要填写</span>
                </div>
                <div class="buttom_center">
                    <div class="input">
                        <input type="text" placeholder="真实姓名">
                    </div>
                    <div class="input">
                        <input type="text" placeholder="身份证号码">
                    </div>
                </div>
                <div class="buttom_bottom">
                    <div class="buttom_left">用户服务协议</div>
                    <button class="buttom_right" @click="submit()">接受协议并注册</button>
                </div>
            </div>
        </div>

        <!-- 邮箱注册 -->
        <div class="x" v-if="index==2">
            邮箱注册
        </div>

        <!-- 个性注册 -->
        <div class="x"  v-if="index==3">
            个性注册
        </div>

    </div>

    <script>
        var app = new Vue({
          el: '#app',
          data: {
              index:1,
              message: 'Hello Vue!'
          },
          methods:{
              change(index){
                 this.index=index
              },
              submit(){
                  
              }
          }
      })
      </script>
</body>

</html>